<template>
	<view class="AddEditor">
		<!-- 地址部分 -->
		<view class="address f-background radius12 margin-bottom-16 por">
			<view @click="onJumpPage('switch','id',params.communityId)">
				<!-- 缺省地址 -->
				<view class="default dis" v-if="!params.communityId">
					<image class="default-icon" :src="`${OnlineStatic}jiacu.png`" mode=""></image>
					<text class="color font-weight-600 size-28">选择小区</text>
				</view>
				<!-- 有地址 -->
				<view class="delivery" v-else>
					<view class="delivery-icon">
						<image class="width-height100" :src="`${OnlineStatic}add.png`" mode=""></image>
					</view>
					<view class="">
						<view class="dis-cen margin-bottom-12">
							<text class="font-weight-500 color3 size-30 ">{{community.communityName}}</text>
							<u-button type="primary" :plain="true"
								:customStyle="{width: '120rpx',height: '48rpx',borderRadius: '100rpx',margin: '0 0 0 16rpx',padding: 0,border: '1px solid #FFA1A1'}"
								color="#E5E5E5" @click="onJumpPage('switch','id',params.communityId)">
								<text class="color font-weight-500 size-20">修改小区</text>
							</u-button>
						</view>
						<view class="font-weight-400 color-9e size-26">
							{{community.province}}{{community.city}}{{community.county}}{{community.communityAddress || ''}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 输入部分 -->
		<view class="input f-background radius12 margin-bottom-16">
			<u-form :model="params" :rules="rules" ref="uForm">
				<u-form-item label="门牌号" labelWidth="112rpx">
					<view class="dis-ali">
						<input v-model="params.building" class="building" placeholder-class="building-plac"
							type="number" placeholder="xx" />
						<view class="unit font-weight-500 color3 size-28">栋</view>
						<input v-model="params.unit" class="building" type="number" placeholder-class="building-plac"
							placeholder="xx" />
						<view class="unit font-weight-500 color3 size-28">单元</view>
						<input v-model="params.number" class="building" placeholder-class="building-plac" type="number"
							placeholder="xx" />
						<view class="unit font-weight-500 color3 size-28">楼号</view>
					</view>
				</u-form-item>
				<u-form-item label="  " labelWidth="112rpx">
					<view class=" width100 border-bottom">
						<input v-model="params.addressInfo" class="input-text size-28 color3 width100"
							placeholder-class="building-plac" type="text" placeholder="补充信息，选填" />
					</view>
				</u-form-item>
				<u-form-item label="联系人" prop="consignee" ref="consignee" labelWidth="112rpx">
					<view class=" width100 border-bottom dis-cen">
						<u--input v-model="params.consignee" maxlength="10" class="input-text size-28 color3"
							placeholder-class="building-plac" type="text" border="none" placeholder="收货人姓名"></u--input>
						<view class="select-sex dis-ali">
							<view class="select-click dis-ali" @click="params.sex = 1">
								<view class="open-select radius100 dis"
									:class="params.sex == 1? 'background':'open-on-select'">
									<image class="open-select-icon" :src="`${OnlineStatic}gou.png`" mode="widthFix"
										v-if="params.sex == 1"></image>
								</view>
								<text class="font-weight-400 color3 size-28">先生</text>
							</view>
							<view class="select-click dis-ali" @click="params.sex = 0">
								<view class="open-select radius100 dis"
									:class="params.sex == 0 ? 'background':'open-on-select'">
									<image class="open-select-icon" :src="`${OnlineStatic}gou.png`" mode="widthFix"
										v-if="params.sex == 0"></image>
								</view>
								<text class="font-weight-400 color3 size-28">女士</text>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="手机号" prop="telephone" ref="telephone" labelWidth="112rpx">
					<view class=" width100 dis-cen" :class="{'border-bottom':borderErr}">
						<u--input v-model="params.telephone" class="input-text size-28 color3" maxlength="11"
							placeholder-class="building-plac" type="text" border="none"
							placeholder="请填写手机号码"></u--input>
					</view>
				</u-form-item>
				<view class="save poflb width100">
					<u-button type="primary" :throttleTime="throttleTime"
						:customStyle="{width: '702rpx',height: '76rpx',borderRadius: '100rpx'}" :color="settings.color"
						@click="submit">
						<text class="color-f font-weight-500 size-28">保存</text>
					</u-button>
					<u-button type="primary" :throttleTime="throttleTime" :plain="true"
						:customStyle="{width: '702rpx',height: '76rpx',borderRadius: '100rpx',marginTop: '20rpx'}"
						:color="settings.color" @click="onDelete" v-if="params.id">
						<text class="color font-weight-600 size-28">删除</text>
					</u-button>
					<view class="inset-bottom"></view>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	const url = {
		switch: '/packagePerson/address/residential'
	}
	import {
		OnlineStatic,
		GetAddressInfoDefault,
		GetCommunityById,
		AddorupdAddressInfos,
		GetAddressInfoById,
		DelAddressInfoById
	} from "@/api/index"
	import { settings, throttleTime } from "@/utils/public"
	export default {
		data() {
			return {
				throttleTime,
				borderErr: false, // 校验失败的时候 才显示边框
				settings,
				selectIndex: 0,
				OnlineStatic,
				rules: {
					consignee: [{
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[a-zA-Z\u4e00-\u9fa5]{1,10}$/,
						transform(value) {
							return String(value);
						},
						message: '1-10位中文或英文，不包含数字和符号',
						trigger: ['blur', 'change']
					}],
					telephone: [{
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}, {
						pattern: /^(13|14|15|16|17|18|19)\d{9}$/,
						transform(value) {
							return String(value);
						},
						message: '以13、14、15、16、17、18、19开头的11位数字',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							// console.log('rule',rule)
							// console.log('value',value)
							// console.log('callback',callback)
						},
						trigger: ['blur', 'change']
					}],
				},
				// pickNunber: 0, // 计算价格的请求参数
				community: {}, // 首页绑定小区
				params: {
					id: '', // 地址id
					communityId: '', // 社区id
					telephone: '', // 联系人电话
					sex: 1, // 	0-女 1-男
					consignee: '', // 	收货人
					addressInfo: '', // 地址详情
					building: '', // 栋
					unit: '', // 单元
					number: '', // 几号
				}
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			console.log('options', options)
			if (options.id) {
				this.params.id = options.id
				// 地址详情
				this.postGetAddressInfoById()
			} else this.postGetAddressInfoDefault() // 获取首页小区
		},
		methods: {
			// 获取详情地址
			async postGetAddressInfoById() {
				const { data, code } = await GetAddressInfoById({ addressId: this.params.id })
				if (code == '200') {
					console.log('data', data)
					for (let i in this.params) {
						console.log(i)
						this.params[i] = data[i]
					}
					this.community = data
				}
			},
			// 获取默认小区
			async postGetAddressInfoDefault() {
				const { data, code } = await GetAddressInfoDefault()
				if (code == '200') {
					if(data) {
						this.params.communityId = data.communityId
						this.community = data
					}

					// console.log('data', data)
				}
			},
			// 获取选择的小区
			async postGetCommunityById(id) {
				const { data, code } = await GetCommunityById({ communityId: id || 0 })
				if (code == '200') {
					console.log('data', data)
					this.params.communityId = data.id
					this.community = data
				}
			},
			// // 获取计价规则计算金额
			// async postPricingRuleCalculation() {
			// 	const params = { pickNunber: this.pickNunber, comityId: this.params.communityId }
			// 	const { data, code } = await PricingRuleCalculation(params)
			// 	if (code == '200') {
			// 		console.log('data',data)
			// 	}
			// },
			// 添加地址
			async postAddorupdAddressInfos() {
				const { data, code } = await AddorupdAddressInfos(this.params)
				if (code == '200') {
					this.promptReturn()
				}
			},
			// 删除地址
			async postDelAddressInfoById() {
				const { data, code } = await DelAddressInfoById({ addressId: this.params.id })
				if (code == '200') {
					this.promptReturn("删除成功")
				}
			},
			// 删除地址
			onDelete() {
				const _this = this
				uni.showModal({
					title: '温馨提示',
					content: '确认删除该地址吗？',
					success: function(res) {
						if (res.confirm) {
							_this.postDelAddressInfoById()
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			submit() {
				const _this = this
				_this.borderErr = false
				this.$refs.uForm.validate().then(res => {
					_this.postAddorupdAddressInfos()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
					_this.borderErr = true
				})
			},
			promptReturn(tis) {
				setTimeout(() => {
					uni.navigateBack()
				}, 1100)
				uni.showToast({
					title: tis || '操作成功',
					duration: 1000
				});
			},
			onJumpPage(name, parName, par) {
				let urlData = url[name]
				if (par) {
					urlData = `${urlData}?${parName}=${par}`
				}
				uni.navigateTo({
					url: urlData
				});
			}
		}
	}
</script>

<style lang="scss">
	.AddEditor {
		padding: 16rpx;

		// 收货地址
		.address {
			padding: 24rpx 12rpx 24rpx 24rpx;

			.contact {
				right: 12rpx;
				top: 50%;
				margin-top: -24rpx;
			}

			// 缺省地址
			.default {
				padding: 8rpx 0 10rpx;

				.default-icon {
					width: 20rpx;
					height: 20rpx;
					margin-right: 8rpx;
				}
			}

			// 有地址
			.delivery {
				display: grid;
				grid-template-columns: 44rpx 1fr;
				grid-column-gap: 24rpx;
				align-items: center;

				.delivery-icon {
					width: 44rpx;
					height: 44rpx;
					margin-right: 24rpx;
				}
			}
		}

		// 输入部分

		.input {
			padding-top: 28rpx;
			padding-left: 24rpx;

			.building {
				width: 118rpx;
				height: 56rpx;
				text-align: center;
				font-size: 28rpx;
				border: 1px solid #E7E7E7;
				// margin-right: 12rpx;
			}

			.unit {
				margin: 0 12rpx;
			}

			.building-plac {
				color: #BCBCBC;
			}

			.input-text,
			.u-input__content__field-wrapper__field {
				width: 50%;
				height: 90rpx;
			}

			.select-click {
				margin-left: 32rpx;
			}

			.select-sex {
				padding-right: 24rpx;
			}
		}

		.save {
			padding: 28rpx 24rpx;
			box-sizing: border-box;
		}
	}
</style>